<template>
  <div>
    <el-button type="success" size="small" @click="dialogVisible()">{{$t('添加')}}</el-button>
    <el-button type="danger" slot="reference" size="small" @click="del_addr">{{$t('删除')}}</el-button>
    <!--    展示页面-->
    <el-table size='mini' :data="server_list" tooltip-effect="dark" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="80">
        <template slot-scope="scope">
          <tooltip :html="scope.$index + 1" :content="scope.$index + 1" class="wid190" :refName="scope.$index + 1">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('对象名称')" width="120">
        <template slot-scope="scope">
          <tooltip :html="scope.row.name" :content="scope.row.name" class="wid190" :refName="scope.row.name">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="cmd_type" :label="$t('协议类型')" width="100">
        <template slot-scope="scope">
          <tooltip :html="cmdObj[scope.row.cmd_type] || $t('其他')" :content="cmdObj[scope.row.cmd_type] || $t('其他')" class="wid190" :refName="cmdObj[scope.row.cmd_type] || $t('其他')">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="prot" :label="$t('协议号')" width="120">
        <template slot-scope="scope">
          <tooltip :html="scope.row.prot" :content="scope.row.prot" class="wid190" :refName="scope.row.prot">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ports" :label="$t('端口号')" width="100">
        <template slot-scope="scope">
          <tooltip :html="scope.row.ports" :content="scope.row.ports" class="wid190" :refName="scope.row.ports">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="type" :label="$t('ICMP的类型')" min-width="100">
        <template slot-scope="scope">
          <tooltip :html="ICMPTooltipValue(scope.row.type)" :content="ICMPTooltipValue(scope.row.type)" class="wid190" :refName="ICMPTooltipValue(scope.row.type)">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="code" :label="$t('ICMP的编码')" min-width="100">
        <template slot-scope="scope">
          <tooltip :html="ICMPTooltipValue(scope.row.code)" :content="ICMPTooltipValue(scope.row.code)" class="wid190" :refName="ICMPTooltipValue(scope.row.code)">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ref" :label="$t('引用计数')" width="120">
        <template slot-scope="scope">
          <tooltip :html="scope.row.ref" :content="scope.row.ref" class="wid190" :refName="scope.row.ref">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="desc" :label="$t('描述')" min-width="120">
        <template slot-scope="scope">
          <tooltip :html="scope.row.desc" :content="scope.row.desc" class="wid190" :refName="scope.row.desc">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="sys" fixed="right" :label="$t('操作')">
        <template slot-scope="scope">
          <el-button :id="`edit${scope.$index}`" v-if="scope.row.sys === 0" type="success" plain size="mini" @click="dialogVisible(scope.row)">
            {{$t('编辑')}}
          </el-button>
          <span v-if="scope.row.sys === 1">{{$t('系统默认')}}</span>
        </template>
      </el-table-column>
    </el-table>
    <ServerTools ref="tools_box" @listData='listData' />
  </div>
</template>

<script>
import ServerTools from './ServerTools'
import { getServiceArray, getServiceInfo, delServiceData } from '@/api/list/server'
export default {
  name: 'ServerDiy',
  components: {
    ServerTools
  },
  data () {
    return {
      server_list: [],
      info: {},
      editVisible: false,
      multipleSelection: [],
      cmdObj: {
        1: 'ICMP_CMD',
        2: 'TCP_CMD',
        3: 'UDP_CMD',
        4: 'DCCP_CMD',
        5: 'SCTP_CMD',
        6: 'IP_CMD',
        7: 'ICMPV6_CMD'
      }
    }
  },
  mounted () {
    this.listData()
  },
  methods: {
    listData () {
      getServiceArray().then(response => {
        this.server_list = response.info
      })
    },
    change (data) {
      this.editVisible = data
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handel_array (row) {
      let test = ''
      row.member.forEach((item, index, array) => {
        if (index === row.member.length - 1) {
          test += item
        } else {
          test += item + ','
        }
      })
      return test
    },
    get_info (row) {
      let formData = {}

      formData.name = row.name
      getServiceInfo(formData).then(response => {
        this.info = response.info[0]
        this.$refs.tools_box.edit_info()
      })
    },
    ICMPTooltipValue (value) {
      if (value === '255' || value === 255) {
        return '-'
      }
      return value
    },
    dialogVisible (data) {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.tools_box.init(data)
      })
    },
    del_addr () {
      if (this.multipleSelection.length === 0) {
        this.$messages.error(this.$t('请至少选择一条数据进行删除'))
        return
      }
      let formData = {}

      formData.name_str = ''
      for (let item of this.multipleSelection) {
        formData.name_str += item.name + '@#@'
      }
      this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        delServiceData(formData).then(res => {
          if (res.status === 0) {
            this.$messages.success(this.$t('删除成功'))
            this.listData()
          }
        })
      })
    }
  }
}
</script>

<style scoped>
</style>
